<template>
	<div id="out">
		<div id="top">
			<img id="imgTop1" src="../assets/img/duanhuowang/zuojiantou.png" alt=""/>
			<span>断货王</span>
			<img id="imgTop2" src="../assets/img/duanhuowang/huizhuan.png" alt=""/>
			
		</div>
		<div id="topB"></div>
		<div id="con">
		<div v-for="item in 3">
			<div class="round"><img src="../assets/img/shouye/1tuijian/xuanliyanzhuang.png" alt=""/></div>
			<div class="goods">
				<span class="lineL"></span>
				<div>
					<a href="#/CommodityDetails"><img src="../assets/img/shouye/1tuijian/buyituozhuangkouhong.png" alt=""/></a>
					<p class="goodName">不易脱妆口红</p>
					<p class="price">￥59</p>
					<p class="surplus">还剩1000件</p>
					<p class="go">马上去抢</p>
				</div>
				<div>
					<a href="#/CommodityDetails"><img src="../assets/img/shouye/1tuijian/huaxinchuncai.png" alt=""/></a>
					<p class="goodName">花蕊唇彩</p>
					<p class="price">￥129</p>
					<p class="surplus">还剩1000件</p>
					<p class="go">马上去抢</p>
				</div>
				<div>
					<a href="#/CommodityDetails"><img src="../assets/img/shouye/1tuijian/jiaowenyukouhong.png" alt=""/></a>
					<p class="goodName">娇吻玉口红</p>
					<p class="price">￥88</p>
					<p class="surplus">还剩1000件</p>
					<p class="go">马上去抢</p>
				</div>
				<span class="lineR"></span>
			</div>
		</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'HelloWorld',
		methods: {
			round: function() {
				setInterval(function() {
					$(".round>img").fadeToggle();
				}, 2000);
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round();
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#out{
		background: rgb(242,242,242);
	}
	#top {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		text-align: center;
		justify-content: space-around;
	}
	
	#imgTop1 {
		width: 2.3rem;
		height: 3.8rem;
	}
	
	#top>span {
		width: 37.6rem;
		height: 3.6rem;
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.6rem;
		letter-spacing: 0px;
	}
	
	#imgTop2 {
		width: 3.6rem;
		height: 3.5rem;
	}
	#topB{
		height: 15.6rem;
		background: white;
	}
	#con{
		padding-bottom: 9.6rem;
	}
	.round {
		width: 100vw;
		height: 30rem;
		background: url(../assets/img/shouye/1tuijian/datu.png) no-repeat;
		background-size: 100% 100%;
		font-size: 0;
		box-sizing: border-box;
	}
	
	.round>img {
		width: 100vw;
		height: 30.5rem;
	}
	
	.goods {
		padding: 1.6rem 2rem;
		overflow: hidden;
		position: relative;
		background: white;
		margin-bottom: 3rem;
		border-bottom: 0.1rem solid rgb(194,194,194);
		width: 100vw;
	}
	
	.goods>.lineL {
		position: absolute;
		top: 5.7rem;
		left: 24.6rem;
		width: 2rem;
		height: 17rem;
		border-left: 0.1rem solid #cccccc;
	}
	
	.goods>.lineR {
		position: absolute;
		top: 5.7rem;
		right: 22.6rem;
		width: 2rem;
		height: 17rem;
		border-left: 0.1rem solid #cccccc;
	}
	
	.goods>div {
		width: 22.6rem;
		float: left;
		text-align: center;
	}
	
	.goods>div>p {
		color: red;
	}
	
	.goods>div>a>img {
		width: 7.5rem;
		height: 15.3rem;
	}
	
	.goods>div>.goodName {
		height: 2.3rem;
		font-family: SimHei;
		font-size: 2.4rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.1rem;
		letter-spacing: 0px;
		color: #000000;
		margin-top: 3.4rem;
		margin-bottom: 2rem;
	}
	
	.goods>div>.price {
		width: 18rem;
		margin: 0 auto;
		height: 3.1rem;
		font-family: SimHei;
		font-size: 2.4rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3.1rem;
		letter-spacing: 0px;
		color: #e83d41;
		padding-bottom: 1rem;
		border-bottom: 0.1rem #cccccc solid;
	}
	
	.goods>div>.surplus {
		height: 1.7rem;
		font-family: SimHei;
		font-size: 1.8rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 1.7rem;
		letter-spacing: 0px;
		color: #4d4d4d;
		margin: 1rem 0;
	}
	
	.goods>div>.go {
		font-family: SimHei;
		font-size: 1.8rem;
		font-weight: normal;
		font-stretch: normal;
		line-height: 3rem;
		letter-spacing: 0px;
		color: white;
		margin: 0 auto;
		width: 13.6rem;
		height: 3rem;
		background-color: #e53e42;
		border-radius: 1.5rem;
	}
</style>